<template>
  <el-pagination
    ref="pagination"
    :small="small"
    :background="background"
    :current-page="listQuery.currentPage"
    :page-sizes="pageSizes"
    :page-size="listQuery.pageSize"
    :layout="layout"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  ></el-pagination>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue'
import { PropType } from '@/global'
import { ParamsProps } from '../types/tablePagination'
export default defineComponent({
  data() {
    return {
      totalList: 10
    }
  },
  props: {
    small: {
      type: Boolean as PropType<Boolean>,
      default: false
    },
    background: {
      type: Boolean as PropType<Boolean>,
      default: true
    },
    total: {
      type: Number as PropType<Number>,
      default: 0
    },
    pageSizes: {
      type: Array as PropType<Array<number>>,
      default: () => {
        return [10, 20, 50, 100]
      }
    },
    layout: {
      type: String as PropType<String>,
      default: 'total, sizes, prev, pager, next, jumper'
    }
  },
  emits: ['getListByPagination'],
  setup(props, { emit }) {
    const listQuery = reactive<ParamsProps>({
      currentPage: 1,
      pageSize: 10
    })
    function handleSizeChange(pageSize: number): void {
      console.log('handleSizeChange')
      listQuery.pageSize = pageSize
      emit('getListByPagination', listQuery)
    }
    function handleCurrentChange(currentPage: number): void {
      console.log('handleCurrentChange')
      listQuery.currentPage = currentPage
      emit('getListByPagination', listQuery)
    }
    return { listQuery, handleSizeChange, handleCurrentChange }
  }
})
</script>
